<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      模板引用ref
        ref 是一个特殊的属性，可以用于给元素或组件做标记，方便后续获取元素的DOM对象或组件的实例对象。
      
      使用步骤：
        1. 标记，使用 ref 属性给元素或组件标记
          1. 字符串语法
            <button ref="mybtn"></button>
          2. 函数语法
            <button :ref="(el) => { 将el赋值给某个数据 }"></button>
        2. 获取 PS: 需要等待组件挂载完成才能获取。
          1. $refs
            通过组件实例对象（this）的 $refs 属性来获取
          2. 结合上面的函数语法来获取
     -->
    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>

    <script>
      const app = Vue.createApp({
        data() {
          return {};
        },

        template: `
          <div>
            <button ref="btn1" @click="fn1">点我1</button>
            <button ref="btn2" @click="fn2">点我2</button>
            <button :ref="(el) => this.btn3 = el">点我3</button>
            <hr />
            <Home ref="myHome" />
            <hr />
            <Home :ref="(el) => this.home = el" />
          </div>
        `,

        methods: {
          fn1() {
            // 直接修改 第二个 Home 组件的 count 数据
            // this.home.count++;

            this.home.changeCount();
          },

          fn2() {
            // 修改 点我1 按钮的 inenrHTML
            this.$refs.btn1.innerHTML = "hello";
          },
        },

        mounted() {
          console.log(this.$refs);
          console.log("this.btn3", this.btn3);
          console.log("this.home", this.home);
        },
      });

      app.component("Home", {
        name: "Home",
        data() {
          return {
            count: 1,
          };
        },
        template: `
          <div>
            <h1>首页</h1>
            <button @click="count++">{{ count }}</button>
          </div>
        `,
        methods: {
          changeCount() {
            this.count = 100;
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
